Programmeren 5

JavaScript - OOP? in JavaScript

Doelstelling

1. JavaScript is geen object-georiënteerde programmeertaal zoals C# of Java dat is. Maar omdat Java en C# zo alomtegenwoordig zijn is de druk toegenomen om ook de object-georiënteerde manier van werken in Java en C# in JavaScript na te bootsen. Tot nu toe hebben we de term object al veel gebruik. We hebben gezien dat array's en functies objecten zijn. We hebben ook gezien wat object-notatie is. Maar het woord object in deze context komt niet overeen met wat een object betekent in Java en C# OOP parlance. Je moet dus steeds voor je zelf duidelijk maken over welk object het gaat in JavaScript: is het een native JavaScript object of is het een object zoals het bestaat in Java of C#? Na deze les ben je in staat dit onderscheid te maken.
2. In JavaScript spreekt met van prototype-based programmeren. Prototype-gebaseerd programmeren is een OOP model dat geen klassen gebruikt. Je maakt eerst een een prototype van een klasse, m.a.w. programmeert een object die het gedrag van een klasse na kan bootsen. Dat prototype kan je later hergebruiken en eventueel uitbreiden met nieuwe methoden en eigenschappen (gelijkt op overerving in klasse-gebaseerde talen zoals C#, PHP, Java). Dit wordt ook wel eens classless, prototype-oriented, of instance-based programmeren genoemd).
3. Sinds ECMAScript 6 beschikt JavaScript over een heuse class-syntaxis. Maar deze class-syntaxis is geen object-oriented inheritance model in JavaScript. JavaScript classes brengen wel een veel eenvoudigere en duidelijkere syntax voor het creëren van objecten maar in wezen zijn het nog altijd constructor functies. JavaScript is een prototype-gebaseerde taal (zoals Java en C# talen zijn die op klassen zijn gebaseerdl). ES6 heeft JavaScript-klassen geïntroduceerd maar die zijn slechts een verpakking voor prototype-gebaseerde overevering en geen dus geen op klassen gebaseerde overervingsmodel. Het woord klasse leidt tot misvervesranden als je denkt dat klassen in JavaScript hetzelfde zijn als klassen in Java of C#. Dus class-syntaxis in JaveAcript gebruiken stelt je niet vrij van een goed begrip te hebben prototype-object georiënteerd programmeren.
4. Na deze les:
   1. kan je meerdere exemplaren of instanties maken van één en hetzelfde object op de tradionele manier met een constructor functie;
   2. kan je instanties maken op de moderne manier met class-syntaxis;

Stappenplan

1. Wat zijn objecten nu eigenlijk in JavaScript?
   1. JS - Objecten - Beschrijving
   2. Filmpje: Wat zijn objecten nu eigenlijk in JavaScript?
2. Werken met JavaScript objecten
   1. JS - Objecten - Maken
   2. Filmpje: Objecten maken in JavaScript
   3. JS - Objecteigenschappen
3. Meerdere exemplaren van één object of waar objecten in JavaScript een beetje beginnen te gelijken op objecten uit talen als Java, C# en PHP?
   1. JS - Object Constructor
   2. Filmpje: Meerdere exemplaren van een object maken in JavaScript
   3. JS - Objecten - Prototype
4. Voorbeeld: Een Ajax bibliotheek
5. Oefening: JS - Geordende tabellen
6. ES 6 Class syntaxis
   1. JS - class-syntaxis
   2. An Introduction To JavaScript ES6 Classes

Opdracht

1. Maak een map met de naam OOP.
2. Werk de TableSort klasse af door gebruik te maken van de prototype based manier:. Dit bestand heet tablesort.js en staat in de map /js:
   1. bij het opstarten wijzen de pijltjes in de kolommen naar boven;
   2. als de gebruiker op een kolomkop klikt:
      1. worden de rijen geordend in de volgorde die door het pijltje wordt aangegeven
      2. verandert het pijltje van richting
   3. Test de TableSort uit in een HTML pagina met de naam tablesort.html.
3. Herschrijf je oplossing voor TableSort door gebruik te maken van de nieuwe class-syntaxis:
   1. plaats de JavaScript hiervoor in een bestand met de naam tablesort-class.js in de map /js
   2. test deze code uit in een HTML pagina met de naam tablesort-class.html; baseer je op de tablesort.html pagina.
4. Je kan de oplossing maken in Visual Studio of een IDE naar keuze, maar zorg ervoor dat na het maken van de opdracht de oplossing gesynchroniseerd is met Bitbucket. Zet in de melding van de commit: "TableSort Opdracht Final".